<template>
	<view class="pages">
		<u-popup v-model="show" mode="top" border-radius="14" safe-area-inset-bottom height="50%">
			<!-- 搜索框 -->
			<u-search :placeholder="placeholder" v-model="value" :clearabled="true" @search="search"
				:disabled="disabled" style="margin-top: 50rpx;"  @custom="search"></u-search>
			<!-- 数据单元 -->
			<u-cell-group style="margin-top: 10rpx;">
				<u-cell-item :title="i.address" v-for="(i,index) in list" :key="index" @click="onCell(i)">
				</u-cell-item>
			</u-cell-group>
		</u-popup>
	</view>
</template>

<script>
	import {
		jsonp
	} from "vue-jsonp";
	export default {
		name: "qzl-map",
		props: {
			placeholder: {
				type: String,
				default: '请输入关键词'
			}
		},
		data() {
			return {
				show: false,
				value: '',
				list: [],
				disabled: false,
				ak: "I5o6A7zZP9Ctuf1ThdyFUsjRIK9dH5zn",
			};
		},
		methods: {
			init(row) {
				if (row) {
					this.value = row;
					this.search()
				}
				this.show = true
			},
			search() {
				this.disabled = true
				jsonp("https://api.map.baidu.com/place/v2/suggestion", {
					query:this.value,
					region: "渭南市",
					output: "json",
					ak: this.ak,
					scope: 2,
				}).then(res => {
					this.list = res.result;
					this.disabled = false;
				})

			},
			onCell(e) {
				console.log(e.address)
				this.$emit('map', e.address,JSON.stringify(e.location))
				this.show = false
			}
		}
	}
</script>

<style scoped>

</style>
